<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加减计数器</title>
    <style>
        /* 设置页面整体样式 */
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f9f9f9; /* 淡灰色背景 */
            color: #333; /* 文字颜色为深灰色 */
        }

        /* 设置计数器容器的样式 */
        .counter {
            display: flex; /* 使用flex布局实现左右排列 */
            align-items: center;
            background: #ffffff; /* 白色背景 */
            padding: 10px;
            border: 1px solid #333; /* 淡灰色边框 */
            border-radius: 5px;
        }

        /* 设置按钮的样式 */
        .counter button {
            width: 40px;
            height: 40px;
            font-size: 18px;
            border: 1px solid #333; /* 淡灰色边框 */
            background: #f5f5f5; /* 按钮背景为浅灰色 */
            color: #333; /* 按钮文字颜色为深灰色 */
            border-radius: 5px;
            cursor: pointer;
            outline: none;
        }

        /* 设置按钮的悬停效果 */
        .counter button:hover {
            background: #e5e5e5; /* 悬停时变为更浅的灰色 */
        }

        /* 设置数字显示区域的样式 */
        .counter .count {
            margin: 0 10px;
            font-size: 18px;
            font-weight: bold; /* 数字加粗显示 */
        }
    </style>
</head>
<body>
    <!-- 计数器容器 -->
    <div class="counter">
        <!-- 减号按钮 -->
        <button id="decrement">-</button>
        <!-- 数字显示区域 -->
        <div class="count" id="count">0</div>
        <!-- 加号按钮 -->
        <button id="increment">+</button>
    </div>

    <script>
        // 获取页面元素
        const decrementButton = document.getElementById('decrement'); // 获取减号按钮
        const incrementButton = document.getElementById('increment'); // 获取加号按钮
        const countDisplay = document.getElementById('count'); // 获取数字显示区域

        // 初始化计数值
        let count = 0;

        // 更新数字显示区域的值
        function updateCount() {
            countDisplay.textContent = count; // 将计数值显示在页面上
        }

        // 为减号按钮添加点击事件监听器
        decrementButton.addEventListener('click', () => {
            count--; // 每次点击减号按钮，计数值减1
            updateCount(); // 更新数字显示区域
        });

        // 为加号按钮添加点击事件监听器
        incrementButton.addEventListener('click', () => {
            count++; // 每次点击加号按钮，计数值加1
            updateCount(); // 更新数字显示区域
        });

        // 初始化数字显示区域
        updateCount();
    </script>
</body>
</html>